<template>
  <!-- 机构认证 -->
  <view id="container">
    <view class="banner">
      <u-steps class="steps" :list="numList" :current="1" un-active-color="#FFFFFF"></u-steps>
    </view>
    <view class="content">
      <!-- 昵称 -->
      <view class="choose-type">
        <view class="name">认证名称</view>
        <input class="holder" type="text" placeholder="请输入昵称" v-model="O_name" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
      </view>

      <!-- 信用代码 -->
      <view class="choose-type">
        <view class="name">信用代码</view>
        <input class="holder" type="text" placeholder="请输入统一社会信用代码" v-model="O_code" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
      </view>
      <!-- 营业执照 -->
      <view class="choose-item" style="border-bottom: 1px solid #e9e9e9" @click="choose_and_upload_img(1)">
        <view class="credit-code">事业单位证明/营业执照</view>
        <view class="upload">
          <image :src="O_img || 'https://i.loli.net/2021/09/02/S28uRzEAoxmKOTg.png'" class="img" mode="aspectFill"></image>
          <view class="txt" v-if="!O_img">请上传营业执照</view>
        </view>
      </view>
      <!-- 手机号码 -->
      <view class="choose-type">
        <view class="name">联系电话</view>
        <view class="phone-item">
          <input type="number" v-model="O_phone" class="phone-n" placeholder="请输入手机号码" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
          <view class="yzm-item">
            <input type="number" v-model="O_verify" class="yzm" placeholder="输入验证码" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" @blur="verify_vericode" />
            <view class="btn" @click="get_verify_code"> {{ button_tips }} </view>
            <!-- 验证码组件 就一个独立的按钮 -->
            <view class="wrap">
              <u-toast ref="uToast"></u-toast>
              <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" @end="verify_end" change-text="x秒后获取" :end-text="end_txt" start-text="获取验证码"> </u-verification-code>
            </view>
            <!-- 验证码组件 -->
          </view>
        </view>
      </view>
      <!-- 法人身份证 -->
      <view class="choose-item">
        <view class="credit-code">上传营运者身份证</view>
        <view class="upload-password">
          <view class="password-item" @click="choose_and_upload_img(2)">
            <image :src="O_face || 'https://i.loli.net/2021/09/02/Hq3Ne6LIzAXt9B4.jpg'" class="icon"> </image>
            <view class="upload-item" v-if="!O_face">上传人像面</view>
          </view>
          <view class="password-item" @click="choose_and_upload_img(3)">
            <image :src="O_back || 'https://i.loli.net/2021/09/02/XKcODqrTVHjvBnI.jpg'" class="icon"> </image>
            <view class="upload-item" v-if="!O_back">上传国徽面</view>
          </view>
        </view>
      </view>
    </view>
    <view class="submit" @click="submit">提交</view>
  </view>
</template>

<script>
var wx = require('jweixin-module')
export default {
  data() {
    return {
      seconds: 60,
      button_tips: '获取验证码',
      end_txt: '',
      current: 0,
      numList: [
        {
          name: '信息填写'
        },
        {
          name: '证件上传'
        },
        {
          name: '完成认证'
        }
      ],
      O_name: '',
      O_code: '',
      O_img: '',
      O_phone: '',
      O_verify: '',
      O_face: '',
      O_back: ''
    }
  },
  onLoad(option) {
		if(option.id) {
			this.getInfo();
		}
    this.__wx_config()
  },
  methods: {
    // 配置微信支付权限
    __wx_config() {
      ;(async () => {
        let url = window.location.href.split('#')[0]
        let res_ticket = await this.$u.api.get_share_ticket({
          current_url: url
        })
        let ticket = res_ticket.data

        let cfg_data = {
          debug: false,
          appId: ticket.appId,
          timestamp: ticket.timestamp,
          nonceStr: ticket.nonceStr,
          signature: ticket.signature,
          jsApiList: ['chooseWXPay']
        }
        wx.config(cfg_data)
      })()
    },
    // 提交
    submit() {
      // 必填项目检查
      if (false == this.must_check()) {
        return
      }
      this.$u.api
        .update_authinfo({
          type: 2,
          firm: this.O_name,
          mobile: this.O_phone,
          code: this.O_verify,
          credit: this.O_code,
          business: this.O_img,
          identity: this.O_face + ',' + this.O_back
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '你的认证已提交，请耐心等待审核',
              icon: 'none'
            })
						setTimeout(() => {
							uni.navigateBack({
							   delta: 1
							});
						}, 500)
            // this.wechat_pay()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    // 微信支付
    wechat_pay() {
      this.$u.api.level_buy().then((res) => {
        if (res.code == 200) {
          let cfg = res.data
          wx.chooseWXPay({
            timestamp: cfg.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: cfg.nonceStr, // 支付签名随机串，不长于 32 位
            package: cfg.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: cfg.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
            paySign: cfg.paySign, // 支付签名
            success: function (res) {
              // 支付成功后的回调函数
              uni.showToast({
                title: '你的认证已提交，请耐心等待审核',
                icon: 'none'
              })
            }
          })
        }
      })
    },
    // 必填项检查
    must_check() {
      let hint = ['认证名称必填', '信用代码必填', '还没有上传营业执照', '请输入手机号码', '请上传身份证正面照片', '请上传身份证背面照片']
      let arr = [this.O_name, this.O_code, this.O_img, this.O_phone, this.O_face, this.O_back]
      for (var i = 0; i < 6; i++) {
        if (arr[i] == '') {
          uni.showToast({
            title: hint[i],
            icon: 'none'
          })
          return false
        }
      }
      return true
    },
    // 上传相关证件
    choose_and_upload_img(type) {
      let that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: function (res) {
          let local_path = res.tempFilePaths[0]
          ;(async () => {
            //图片转bs64 向服务器换取图片的url
            let bs64 = await that.$u.utils.auth_img2base64(local_path, 0)
            that.$u.api
              .upload_base64({
                chars: bs64,
                check: 0
              })
              .then((res) => {
                if (res.code != 200) {
                  that.$refs.uToast.show({
                    title: res.msg,
                    type: 'error'
                  })
                } else {
                  switch (type) {
                    case 1:
                      that.O_img = that.vuex_api_HEADER + res.data.path
                      break
                    case 2:
                      that.O_face = that.vuex_api_HEADER + res.data.path
                      break
                    case 3:
                      that.O_back = that.vuex_api_HEADER + res.data.path
                      break
                  }
                }
              })
          })()
        }
      })
    },
    // 获取验证码
    get_verify_code() {
			if(this.button_tips ===  '获取验证码') {
				this.$u.api.get_phone_verify_code({
					mobile: this.O_phone
				}).then((res) => {
				    if (res.code == 200) {
				      this.$u.toast('验证码已发送')
				      this.$refs.uCode.start()
				    } else {
				      this.$u.toast('请稍后重试')
				    }
				 })
			} else {
				this.$u.toast('请稍后')
			}
      
    },
    //失去焦点时，验证手机验证码
    verify_vericode() {
      let self = this
      this.$u.api
        .verify_vericode({
          mobile: this.O_phone,
          code: this.O_verify
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '验证通过',
              icon: 'none'
            })
            self.end_txt = '验证通过'
            this.$refs.uCode.reset()
            this.button_tips = '验证通过'
          } else {
            uni.showToast({
              title: '验证错误，请仔细核对验证码',
              icon: 'none'
            })
            self.end_txt = '请重新输入'
            this.$refs.uCode.reset()
            this.button_tips = '重新输入'
          }
        })
    },
    codeChange(text) {
      this.button_tips = text
    },
    verify_end() {
      this.$refs.uCode.reset()
    },
		// 获取认证信息详情
		getInfo() {
			this.$u.api.get_authinfo().then(res => {
				if(res.code === 200 ) {
					this.O_name = res.data.firm;
					this.O_phone = res.data.mobile;
					this.O_code = res.data.credit;
					this.O_img = res.data.business;
					this.O_face = res.data.identity[0];
					this.O_back = res.data.identity[1];
				}
			})
		}
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

#container {
  .banner {
    width: 750rpx;
    height: 400rpx;
    background: linear-gradient(90deg, #66cee7 0%, #6ae4e9 100%);
    padding-top: 50rpx;
  }

  .content {
    width: 687rpx;
    background-color: #fff;
    border-radius: 10rpx;
    position: relative;
    top: -181rpx;
    margin: 0 auto;
    font-weight: 700;
    padding: 10rpx 23rpx;

    .choose-type {
      display: flex;
      border-bottom: 1px solid #e9e9e9;
      padding: 38rpx 0;

      .name {
        padding-right: 63rpx;
      }

      .holder {
        background-color: #f3f7fa;
        padding-left: 10rpx;
      }

      .phone-item {
        .phone-n {
          width: 400rpx;
          height: 45rpx;
          background-color: #f3f7fa;
          margin-bottom: 18rpx;
          padding-left: 10rpx;
        }

        .yzm-item {
          display: flex;

          .yzm {
            width: 253rpx;
            height: 45rpx;
            padding-left: 10rpx;
            background-color: #f3f7fa;
          }

          .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 45rpx;
            width: 133rpx;

            border-radius: 5px;
            background-color: #ffb400;
            font-size: 20rpx;
            line-height: 20rpx;
            color: #fff;
            margin-left: 10rpx;
          }
        }
      }

      .choose {
        padding-left: 38rpx;

        radio-group {
          display: flex;

          .uni-list-cell {
            display: flex;
            padding-right: 54rpx;
          }
        }
      }
    }

    .choose-item {
      padding: 38rpx 0;

      .upload {
        position: relative;
        width: 340rpx;
        height: 160rpx;
        margin: 0 auto;
        margin-top: 29rpx;

        .img {
          width: 340rpx;
          height: 160rpx;
        }

        .txt {
          font-size: 16rpx;
          color: #5874cf;
          position: absolute;
          left: 50%;
          bottom: 19rpx;
          transform: translateX(-50%);
        }
      }

      .upload-password {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 37rpx;

        .password-item {
          width: 280rpx;
          height: 230rpx;
          position: relative;

          .upload-item {
            position: absolute;
            bottom: 10rpx;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20rpx;
            color: #fff;
          }

          .icon {
            width: 280rpx;
            height: 230rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  .submit {
    width: 536rpx;
    height: 79rpx;
    line-height: 79rpx;
    font-size: 38rpx;
    color: #fff;
    background-color: #3ac7e5;
    border-radius: 39rpx;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: -126rpx;
  }
}
</style>
